<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.editOrgState.visible"
            :title="api.editOrgState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseEditOrg()"
    >
        <el-alert
                :closable="false"
                class="mb-4"
                title="数据访问权限"
                type="success"
        >
            <div class="fill-width d-flex align-center justify-space-between">
                <div>用于控制<strong>【 {{ api.editOrgState.form.name }} 】</strong>可访问到的<strong>【 组织机构 】</strong>数据</div>
            </div>

        </el-alert>

        <el-form
                ref="formRef"
                :model="api.editOrgState.form"
                :rules="rules"
                status-icon
        >
            <el-form-item
                    label="数据类型"
                    prop="roleType"
            >
                <i-attach-select
                        v-if="api.editOrgState.form.roleType"
                        v-model:model-value="api.editOrgState.form.roleType"
                        :params="{target:'ROLE_TYPE'}"
                        class="fill-width"/>
            </el-form-item>

            <el-card v-if="api.editOrgState.form.roleType === 'CUSTOM'" class="edit-org" shadow="never">
                <el-space>
                    <el-checkbox
                            border
                            class="mb-2"
                            label="全选"
                            size="small"
                            @change="onCheckAll"
                    />
                    <el-checkbox
                            v-model="checkStrictly"
                            border
                            class="mb-2"
                            label="父子联动"
                            size="small"
                    />
                </el-space>
                <el-scrollbar class="fill-width flex-fill" height="400px">
                    <el-form-item
                            prop="orgIdList"
                    >
                        <el-tree
                                ref="orgTree"
                                :check-strictly="!checkStrictly"
                                :data="orgApi.treeState.data"
                                :props="{label:'name'}"
                                class="fill-width"
                                node-key="id"
                                render-after-expand
                                show-checkbox
                        />
                    </el-form-item>
                </el-scrollbar>
            </el-card>


            <div class="fill-width d-flex justify-end">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="api.onCloseEditOrg()">关闭</el-button>
            </div>
        </el-form>

    </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, ref, watch} from "vue";
import {ElTree, FormRules} from "element-plus";
import {RoleApi} from "~/api/system/role/role.api";
import {OrgApi} from "~/api/system/org/org.api";

interface Props {
    api: RoleApi;
}

const orgApi = new OrgApi(true);
const {api} = withDefaults(defineProps<Props>(), {});
const formRef = ref();
const orgTree = ref<InstanceType<typeof ElTree>>();
const checkStrictly = ref(false);

const rules = reactive<FormRules>({
    name: [{required: true, message: "请输入公司名称", trigger: "blur"}],
    roleType: [{required: true, message: "请角选择色类型", trigger: "blur"}],
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.editOrgState.form.permissionList = undefined;
        api.editOrgState.form.menuIdList = undefined;

        api.editOrgState.form.orgIdList = orgTree.value?.getCheckedKeys() as any;
        api.updateOrg(api.editOrgState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseEditOrg();
            }
        });
    }
}

function onCheckAll(checkAll: boolean) {
    checkStrictly.value = true;
    requestAnimationFrame(() => {
        orgApi.treeState.data.forEach((org: any) => {
            orgTree.value!.setChecked(org.id, checkAll, true);
        });
        checkStrictly.value = false;
    });
}

watch(() => api.editOrgState.form.id, value => {
    if (value) {
        api.editOrgState.form.orgIdList?.forEach(key => {
            orgTree.value!.setChecked(key, true, false);
            orgTree.value!.setCurrentKey(key, true);
        });
    }
});
</script>

<style lang="scss" scoped>
.edit-org {
  margin-bottom: 8px;

  :deep(.el-card__body) {
    position: relative;
    padding: 8px;
  }
}
</style>
